<!DOCTYPE html>
<html lang="zh_cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="dinian">
    <title>郑州商学院图书信息管理</title>

    <link rel="shortcut icon" href="../dist/img/favicon.ico" />
    <!-- Bootstrap Core CSS -->
    <link href="../vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- MetisMenu CSS -->
    <link href="../vendor/metisMenu/metisMenu.min.css" rel="stylesheet">

    <!-- DataTables CSS -->
    <link href="../vendor/datatables-plugins/dataTables.bootstrap.css" rel="stylesheet">

    <!-- DataTables Responsive CSS -->
    <link href="../vendor/datatables-responsive/dataTables.responsive.css" rel="stylesheet">

    <!-- bootstrap table组件以及中文包的引用 -->
    <link href="../vendor/bootstrap-table/css/bootstrap-table.css" rel="stylesheet" />

    <!--fileinput-->
    <link href="../dist/css/fileinput.min.css" rel="stylesheet">
    <link href="../dist/css/fileinput-rtl.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="../dist/css/sb-admin-2.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="../vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
</head>
<body>
<div id="wrapper">
    <!-- Navigation -->
    <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">郑州商学院图书信息管理</a>
        </div>
        <!-- /.navbar-header -->
        <!-- /.navbar-top-links -->
        <div class="navbar-default sidebar" role="navigation">
            <div class="sidebar-nav navbar-collapse">
                <ul class="nav" id="side-menu">
                    <li>
                        <a href="javascript:void (0)" onclick= "fileInput()"><i class="fa fa-plus fa-fw"></i> 导入数据</a>
                    </li>
                    <li>
                        <a href="javascript:void (0)" onclick= "newspaper()"><i class="fa fa-table fa-fw"></i> 报纸</a>
                    </li>
                    <li>
                        <a href="javascript:void (0)" onclick= "periodical()"><i class="fa fa-table fa-fw"></i> 期刊</a>
                    </li>
                </ul>
            </div>
            <!-- /.sidebar-collapse -->
        </div>
        <!-- /.navbar-static-side -->
    </nav>
    <div id="page-wrapper">

        <div class="row">
            <div class="col-lg-9" id="f_input">
                <h3>上传须知：</h3><p>上传文件名务必包含报纸或期刊，便于后台区分导入。</p><hr>
                <input id="f_upload" type="file" name="file"/>
            </div>
        </div>

        <div id="page-wrapper-record">
            <!--table-->
            <div class="row">
                <div class="col-lg-12">
                    <hr>
                    <div class="panel panel-default">
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <div class="col-lg-12">
                                <div id="toolbar" class="btn-group">
                                    <button id="btn_add" class="btn btn-default" data-toggle="modal" data-target="#addNewspaperModal">
                                        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
                                    </button>
                                    <button id="btn_edit" class="btn btn-default">
                                        <!--<button id="btn_edit" class="btn btn-default" data-toggle="modal" data-target="#modifyRecordModal">-->
                                        <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
                                    </button>
                                    <button id="btn_delete" class="btn btn-default">
                                        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
                                    </button>
                                </div>
                            </div>
                            <table class="table-responsive" id="tb_books"></table>
                            <!-- /.table-responsive -->
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
            </div>
            <!-- 添加模态框 -->
            <div class="modal fade " id="addNewspaperModal" tabindex="-1" role="dialog" aria-labelledby="addNewspaperModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="addNewspaperModalLabel">添加报纸信息</h4>
                        </div>

                        <div class="modal-body">
                            <form id="addNewspaper">
                                <input type="hidden" name="userId">
                                <div class="form-group">
                                    <label for="newsCode" class="control-label">征订号</label>
                                    <input type="text" class="form-control" id="newsCode" name="newsCode">
                                </div>
                                <div class="form-group">
                                    <label for="newsName" class="control-label">名称</label>
                                    <input type="text" class="form-control" id="newsName" name="newsName">
                                </div>
                                <div class="form-group">
                                    <label for="newsIndex" class="control-label">排架号</label>
                                    <input type="text" class="form-control" id="newsIndex" name="newsIndex">
                                </div>
                                <div class="text-right">
                                    <span id="addMessage" class="glyphicon"> </span>
                                    <button type="button" class="btn btn-default right" data-dismiss="modal">关闭</button>
                                    <button id="addNewspaperBtn" type="button" class="btn btn-primary">添加</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 模态框结束 -->
            <!-- 修改模态框 -->
            <div class="modal fade " id="modifyNewspaperModal" tabindex="-1" role="dialog" aria-labelledby="modifyNewspaperModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="modifyNewspaperModalLabel">修改信息</h4>
                        </div>

                        <div class="modal-body">
                            <form id="modifyNewspaper">
                                <input type="hidden" id="id-modify" name="id">
                                <div class="form-group">
                                    <label for="newsCode-modify" class="control-label">征订号</label>
                                    <input type="text" class="form-control" id="newsCode-modify" name="newsCode">
                                </div>
                                <div class="form-group">
                                    <label for="newsName-modify" class="control-label">名称</label>
                                    <input type="text" class="form-control" id="newsName-modify" name="newsName">
                                </div>
                                <div class="form-group">
                                    <label for="newsIndex-modify" class="control-label">排架号</label>
                                    <input type="text" class="form-control" id="newsIndex-modify" name="newsIndex">
                                </div>
                                <div class="text-right">
                                    <span id="modifyMessage" class="glyphicon"> </span>
                                    <button type="button" class="btn btn-default right" data-dismiss="modal">关闭</button>
                                    <button id="modifyNewspaperBtn" type="button" class="btn btn-primary">修改</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 模态框结束 -->
        </div>
        <div id="page-wrapper-periodical">
            <div class="row">
                <div class="col-lg-12">
                    <hr>
                    <div class="panel panel-default">
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <div class="col-lg-12">
                                <div id="p_toolbar" class="btn-group">
                                    <button id="addPeriodical" class="btn btn-default" data-toggle="modal" data-target="#addPeriodicalModal">
                                        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
                                    </button>
                                    <button id="editPeriodical" class="btn btn-default">
                                        <!--<button id="btn_edit" class="btn btn-default" data-toggle="modal" data-target="#modifyRecordModal">-->
                                        <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
                                    </button>
                                    <button id="deletePeriodical" class="btn btn-default">
                                        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
                                    </button>
                                </div>
                            </div>
                            <table class="table-responsive" id="tb_periodicals"></table>
                            <!-- /.table-responsive -->
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
            </div>
            <!-- 添加模态框 -->
            <div class="modal fade " id="addPeriodicalModal" tabindex="-1" role="dialog" aria-labelledby="addPeriodicalModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="addPeriodicalModalLabel">添加期刊信息</h4>
                        </div>

                        <div class="modal-body">
                            <form id="addPeriodicalForm">
                                <input type="hidden" name="userId">
                                <div class="form-group">
                                    <label for="newsCode" class="control-label">征订号</label>
                                    <input type="text" class="form-control" id="periodicalCode" name="periodicalCode">
                                </div>
                                <div class="form-group">
                                    <label for="newsName" class="control-label">名称</label>
                                    <input type="text" class="form-control" id="periodicalName" name="periodicalName">
                                </div>
                                <div class="form-group">
                                    <label for="newsIndex" class="control-label">排架号</label>
                                    <input type="text" class="form-control" id="periodicalIndex" name="periodicalIndex">
                                </div>
                                <div class="text-right">
                                    <span id="addPeriodicalMessage" class="glyphicon"> </span>
                                    <button type="button" class="btn btn-default right" data-dismiss="modal">关闭</button>
                                    <button id="addPeriodicalBtn" type="button" class="btn btn-primary">添加</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 模态框结束 -->
            <!-- 修改模态框 -->
            <div class="modal fade " id="modifyPeriodicalModal" tabindex="-1" role="dialog" aria-labelledby="modifyPeriodicalModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="modifyPeriodicalModalLabel">修改信息</h4>
                        </div>

                        <div class="modal-body">
                            <form id="modifyPeriodicalFrom">
                                <input type="hidden" id="idPeriodical-modify" name="id">
                                <div class="form-group">
                                    <label for="periodicalCode-modify" class="control-label">征订号</label>
                                    <input type="text" class="form-control" id="periodicalCode-modify" name="periodicalCode">
                                </div>
                                <div class="form-group">
                                    <label for="periodicalName-modify" class="control-label">名称</label>
                                    <input type="text" class="form-control" id="periodicalName-modify" name="periodicalName">
                                </div>
                                <div class="form-group">
                                    <label for="periodicalIndex-modify" class="control-label">排架号</label>
                                    <input type="text" class="form-control" id="periodicalIndex-modify" name="periodicalIndex">
                                </div>
                                <div class="text-right">
                                    <span id="modifyPeriodicalMessage" class="glyphicon"> </span>
                                    <button type="button" class="btn btn-default right" data-dismiss="modal">关闭</button>
                                    <button id="modifyPeriodicalBtn" type="button" class="btn btn-primary">修改</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 模态框结束 -->
        </div>
    </div>
</div>
<!-- /#wrapper -->

<!-- jQuery -->
<script src="../vendor/jquery/jquery.min.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="../vendor/bootstrap/js/bootstrap.min.js"></script>

<!-- Bootstrap Validator -->
<script src="https://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.js"></script>

<!-- Metis Menu Plugin JavaScript -->
<script src="../vendor/metisMenu/metisMenu.min.js"></script>

<!-- DataTables JavaScript -->
<script src="../vendor/datatables/js/jquery.dataTables.min.js"></script>
<script src="../vendor/datatables-plugins/dataTables.bootstrap.min.js"></script>
<script src="../vendor/datatables-responsive/dataTables.responsive.js"></script>

<!-- bootstrap table组件以及中文包的引用 -->
<script src="../vendor/bootstrap-table/js/bootstrap-table.js"></script>
<script src="../vendor/bootstrap-table/js/bootstrap-table-zh-CN.js"></script>

<!-- Custom Theme JavaScript -->
<script src="../dist/js/sb-admin-2.js"></script>

<!--fileinput-->
<script src="../dist/js/fileinput.min.js"></script>
<script src="../dist/js/zh.js"></script>

<script src="../dist/js/sweetalert.min.js"></script>

<!-- Customize -->

<script src="../dist/js/tb_book.js"></script>

<script>
		$(function() {
			//0.初始化fileinput
			var oFileInput = new FileInput();
			oFileInput.Init("f_upload", "/uploadExcel");

            $("#page-wrapper-periodical").hide();
			$("#page-wrapper-record").hide();
			$("#f_input").show();
		});

		//初始化fileinput
		var FileInput = function() {
			var oFile = new Object();

			//初始化fileinput控件（第一次初始化）
			oFile.Init = function(ctrlName, uploadUrl) {
				var control = $('#' + ctrlName);

				//初始化上传控件的样式
				control.fileinput({
					language: 'zh', //设置语言
					uploadUrl: uploadUrl, //上传的地址
					allowedFileExtensions: ['xls', 'xlsx'], //接收的文件后缀
					enctype: 'multipart/form-data',
				});
				//导入文件上传完成之后的事件
                $("#f_upload").on("fileuploaded", function (event, data, previewId, index) {
                    if(data.response.code == 200){
                        swal({
                            title: data.response.data,
                            icon: "success",
                            timer: 2000
                        })
                    }else{
                        swal({
                            title: data.response.data,
                             icon: "error",
                            timer: 3000
                        })
                    }
                });
			}
			return oFile;
		};

		function fileInput(){
		    $("#page-wrapper-periodical").hide();
		    $("#page-wrapper-record").hide();
			$("#f_input").show();
		   }
		function newspaper(){
		    $("#page-wrapper-periodical").hide();
		    $("#page-wrapper-record").show();
			$("#f_input").hide();
			$("#tb_books").bootstrapTable("refresh");
		}
		function periodical(){
		    $("#page-wrapper-periodical").show();
		    $("#page-wrapper-record").hide();
			$("#f_input").hide();
			$("#tb_periodicals").bootstrapTable("refresh");
		}
	</script>
</body>
</html>